React Router

The @nano_kit/react-router package provides React integration for @nano_kit/router. It allows you to use the router’s powerful features like code splitting, dependency injection, and state management directly within your React application.

Installation

Install the package using your favorite package manager:

pnpm

pnpm add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router

Yarn

yarn add @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router

npm

npm install @nano_kit/store @nano_kit/router @nano_kit/react @nano_kit/react-router

Setup

Basically, @nano_kit/react-router re-exports everything from @nano_kit/router, so you can use all base router functions. However, it enhances some of them and provides new utilities specifically for React.

A typical setup looks like this:

import { browserNavigation, app, layout, page, loadable, Outlet } from '@nano_kit/react-router'
import { MainLayout } from './MainLayout'

/* Define routes config */
const routes = {
  home: '/',
  user: '/users/:id'
} as const

/* Create navigation */
const [$location, navigation] = browserNavigation(routes)

/* Define loader fallback */
const Loader = () => <div>Loading...</div>

/* Create App component */
const App = app($location, [
  layout(MainLayout, [
    page('home', loadable(() => import('./Home'), Loader)),
    page('user', loadable(() => import('./User'), Loader))
  ])
])

/* Render App */
createRoot(document.getElementById('root')!).render(<App />)

React Specifics

router & router$

The router function in this package is an enhanced version of the core router. It supports React components as views and correctly handles nested layouts using the Outlet component.

router$ is the Dependency Injection variant, perfect for usage with InjectionContextProvider.

import { router$, page } from '@nano_kit/react-router'
import { Location$ } from './router'

const [Page$] = router$(Location$, [
  page('home', HomePage),
  page('user', UserPage)
])

app & app$

The app function creates a main React component that reacts to route changes and renders the matching page. It simplifies the boilerplate of manually subscribing to the page signal.

app$ is the DI variant which returns an [App, StoresToPreload$] tuple.

import { app$, layout, page } from '@nano_kit/react-router'

/* Create a DI-ready App component */
const [App, StoresToPreload$] = app$(Location$, [
  layout(RootLayout, [
    page('home', Home)
  ])
])

Outlet

Used within Layout components to define where the nested child route should be rendered.

import { Outlet } from '@nano_kit/react-router'

export function MainLayout() {
  return (
    <div className="layout">
      <Sidebar />
      <main>
        {/* Nested page will be rendered here */}
        <Outlet />
      </main>
    </div>
  )
}

link & link$

Creates a type-safe Link component bound to your router instance. It supports preload on hover/focus if configured.

import { buildPaths, link, preloadable } from '@nano_kit/react-router'
import { pages } from './pages'

/* Create Link component */
const Link = link(
  navigation,
  buildPaths(routes),
  /* Optional: enable preloading on interaction */
  preloadable(pages)
)

/* Usage */
<Link to="user" params={{ id: '123' }} preload>
  View User
</Link>

For DI usage, link$ accepts a Navigation$ token:

const Link = link$(Navigation$, buildPaths(routes))